<template>
	<view>
		<uni-nav-bar statusBar="true" 
		:fixed="true" :border="false" 
		backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<view class="leftIcon" @tap.stop="back">
					<uni-icon type="back" color="#ffffff" size="30"></uni-icon>
				</view>
				<view class="index-top-nav-title-content">
					{{i18n.pay}}
				</view>
				<view class="rightIcon">
				</view>
			</view>
		</uni-nav-bar>
		<view class="content">
			
			<view class="transfer-content-title">
				<view class="title-name">
					{{info.title}}
				</view>
				<view class="title-num">
					{{info.freeze}}
				</view>
				<text>{{curInfo.title_en}}</text>
			</view>
			<view class="item">
				<text>{{i18n.price}}</text>
				<view>{{info.freeze}}/{{i18n.station}}</view>
			</view>
			
			<view class="item">
				<text>{{i18n.buy_numbers}}</text>
				<view>{{info.num}}</view>
			</view>
			
			<view class="item">
				<text>{{i18n.paypwds}}</text>
				<view>
					<input type="text" password value="" maxlength="6" v-model="buyPass" :placeholder="i18n.p_enter_paddword" />
				</view>
			</view>
			
			
		<!-- 	<view class="item-choose">
				<view class="item-choose-c">
					<image src="../../static/imgs/eth.png" mode="widthFix" lazy-load></image>
					<view class="item">
						<view>账户</view>
						<text>73194760qdjq7hf017137</text>
					</view>
					 
				</view>
				<view class="item-choose-r">
					<uni-icon type="arrowright" size="24" color="#6b6b6b"></uni-icon>
				</view>
			</view> -->
			<view class="tranfer-btn" @tap.stop="submit">
				{{i18n.payImmediately}}
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon/uni-icon.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang',
				'getPackages'
			])
		},
		components:{
			uniIcon,
			uniNavBar,
			Load
		},
		data() {
			return {
				showLoad:false,
				buyPass:'',
				info:{},
				curInfo:{}
			}
		},
		onLoad(e) {
			console.log(JSON.parse(e.item));
			this.curInfo = JSON.parse(e.item)
			this.info = this.getPackages;
			console.log(this.getPackages);
		},
		onShow() {
			let _this = this
			if(!_this.getLoginInfo.paypwd){
				uni.showModal({ //提醒用户更新
					title: _this.i18n.message,   
					content: _this.i18n.have_no_paypwd,  
					success: (res) => {  
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/modify-pwd/modify-pwd'
							})											 
						}else{
							
						}
					},
					fail:(err)=>{
						showToast(fail)
					}
				})
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			submit() {
				if (!this.buyPass) {
					showToast(this.i18n.enter_payment_code)
					return
				}
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					lang_type: this.getLang=='en'?2:1,
					paypwd: this.buyPass,
					num:this.info.num,
					shopid: this.info.id,
					token_id: this.info.token_id
				}
				this.showLoad = true;
				fetch(this.getRequestUrl + '/api/shop/buy_shop', _data, 'post')
					.then(res => {
						this.showLoad = false;
						// console.log(res)
						// uni.hideLoading()
						this.buyPass = ''
						if (res.statusCode == 200 && res.data.code == 1) {
							uni.switchTab({
								url:'/pages/fund/fund'
							})
						}
						showToast(res.data.msg)
					})
					.catch(err => {
						this.showLoad = false;
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		font-size: 36upx;
		text-align: center;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftIcon{
			width: 80upx;
		}
		.rightIcon{
			width: 80upx;
		}
		.index-top-nav-title-content{
			flex: 1;
		}
	}
	.content{
		.transfer-content-title{
			padding:60upx 0;
			text-align: center;
			.title-name{
				color: #000000;
				font-size: 27upx;
			}
			.title-num{
				font-size:48upx;
				color: #898989;
				font-weight: bold;
			}
			text{
				font-size:20upx;
				color: #000000;
			}
		}
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32upx 42upx;
			border-bottom: 1upx solid #EEEEEE;
			text{
				font-size: 22upx;
				color: #5E5E5E;
			}
			view{
				font-size: 24upx;
				color: #2e2e2e;
			}
		}
		.item-choose{
			margin: 42upx 25upx;
			background-color: #EDEDED;
			padding:28upx 30upx;
			border-radius: 8upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item-choose-c{
				display: flex;
				align-items: center;
				image{
					width: 60upx;
					height: 60upx;
					border-radius: 30upx;
					margin-right: 26upx;
				}
			}
		}
		.tranfer-btn{
			width: 620upx;
			line-height: 80upx;
			height: 80upx;
			text-align: center;
			background-color: #1D7DFF;
			color: #FFFFFF;
			border-radius: 10upx;
			margin:0 auto;
			margin-top: 60upx;
		}
	}
</style>
